<template>
	<view class="orderlist">
		<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in list" :key="item._id" @open="open" :options="options">
			<view @click="Orderdetails(item)" class="louis-color-333 table-item louis-slide-bottom-2">
				<view class="itemhear  louis-space-between">
					<view class=" ">

						{{item.fromname}}
					</view>
					<view class="louis-end ">
						{{$u.timeFormat(item.expires_in, 'mm月dd日')}}
						</text>

					</view>
				</view>
				<!-- 	<transition name="slide-fade"> -->
				<view class="louis-slide-bottom-2 louis-font-25rpx">
					<u-line border-style="dashed"></u-line>
					<view class="louis-space-between  showdetails ">
							 
							 <view class="louis-flex louis-inline-block">
							 	<text class="louis-color-P" >{{item.count}}</text>/件
							 </view>
							 
							 
						<view class="louis-flex louis-inline-block">
							<text class="louis-color-D" style="padding-right: 10rpx;">{{item.total}}</text>元
						</view>
					</view>
				</view>
				<!-- </transition> -->
					<view>
					<view class="louis-space-between louis-font-20rpx  showdetails ">
						<text class="louis-color-R">
						
						{{item.expires_name}}
						</text>
						<text class="louis-color-R">查看详情
						<text style="top: 5rpx;" class="louis-relative louis-icon-gengduo "> </text>
						</text>
					</view>
				</view>

			</view>
		</u-swipe-action>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				options: [{
						text: '编辑',
						style: {
							fontSize: "25rpx",
							backgroundColor: '#007aff'
						}
					},
					{
						text: '删除',
						style: {
							fontSize: "25rpx",
							backgroundColor: '#dd524d'
						}
					}
				],
			};
		},
		onShow() {
			this.getlist()
		},
		methods: {
			Orderdetails(item) {
				// console.log(item);
				uni.navigateTo({
					url: './Orderdetails/Orderdetails?id=' + item._id
				})
			},
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if (index != idx) this.list[idx].show = false;
				})
			},
			getlist() {
				uni.showLoading({
					title: '处理中...'
				})
				uniCloud.callFunction({
					data: {
						openid: this.$store.state.vuex_openid
					},
					name: 'getorderlist'
				}).then((res) => {
					uni.hideLoading()

					this.list = res.result.data

					console.log(this.list)
				}).catch((err) => {
					uni.hideLoading()

					console.error(err)
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.table-item {
		background-color: #FFFFFF;
		// border: 1px solid #C0C0C0;
		margin: 10rpx 20rpx;
		border-radius: 10rpx;
		padding: 10rpx;
		font-size: 28rpx;

	}

	.orderlist {
		background-color: #f3f7fa;

		/deep/ .u-swipe-action {
			background-color: #f3f7fa !important;
		}
	}
</style>
<style>
	page {
		background-color: #f3f7fa;
	}
</style>
